<template>
  <div class="all">
    <div class="head">
      <div class="headclick" @click="back">
        <el-icon>
          <ArrowLeft />
        </el-icon>
        <span class="text-large font-600 mr-3">事件维护</span>
      </div>
      <div class="selfclick" @click="self">
        <img src="../../assets/user.png" style="width:25px;" />
      </div>
    </div>

    <div class="main">

      <el-input v-model="input" style="max-width: 400px" placeholder="请输入">
        <template #prepend>
          <el-select v-model="select" placeholder="搜索方式" style="width: 115px">
            <el-option label="事件名" value="事件名" />
            <el-option label="事件等级" value="事件等级" />
            <el-option label="事件类型" value="事件类型" />

          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" @click="Searchby" />
        </template>
      </el-input>
      <div class="row">
        <div > 
          <el-icon @click="refresh">
            <Refresh />
          </el-icon>
          <el-text @click="refresh">刷新</el-text>
        </div>
        <el-button @click="dialogFormVisible = true" style="margin-right:10px;margin-top:2px">添加事件</el-button>
      </div>
      <el-scrollbar height="460px" style="margin-top:5px">
        <br />
        <div v-for="event in eventArr" :key="event.eventID" class="scrollbar-demo-item" style="height: 140px;">
        <div class="row">
          <el-text>事件ID:{{ event.eventID }}</el-text> <el-icon size="25px" @click="update(event.eventID)">
            <Edit />
          </el-icon>
        </div>
        <el-icon>
          <Link />
        </el-icon>
        事件名:{{ event.eventName }}
        <br />
        <el-icon>
          <Warning />
        </el-icon>
        事件等级:{{ event.eventLevel }}
        <br />
        <el-icon>
          <Fold />
        </el-icon>
        事件类型:{{ event.eventType }}
        <br />
        <el-icon>
          <Bell />
        </el-icon>
        备注:{{ event.remarks }}
        <div class="del">
          <el-popconfirm title="你确认要修改吗?" @confirm="deleteEvent(event.eventID)">
            <template #reference>
              <el-icon size="25px">
                <DeleteFilled />
              </el-icon>
            </template>
          </el-popconfirm>

        </div>
      </div>
        <el-icon>
          <Service />
        </el-icon>
        <el-text>客服</el-text>
      </el-scrollbar>
    </div>


    <el-dialog v-model="dialogFormVisible1" title="事件信息修改" width="300">
      <el-form :model="updateeventinfo">
        <el-form-item label="事件ID">
          <el-input v-model="updateeventinfo.eventID" autocomplete="off" disabled="" />
        </el-form-item>
        <el-form-item label="事件名">
          <el-input v-model="updateeventinfo.eventName" autocomplete="off" />

        </el-form-item>
        <el-form-item label="事件类型">
          <el-select v-model="updateeventinfo.eventType" filterable placeholder="Select" style="width: 240px">
            <el-option v-for="type in eType" :key="type" :label="type" :value="type" />
          </el-select>
        </el-form-item>
        <el-form-item label="事件等级">
          <el-select v-model="updateeventinfo.eventLevel" placeholder="选择等级">
            <el-option label="一级" value="1" />
            <el-option label="二级" value="2" />
            <el-option label="三级" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="updateeventinfo.remarks" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取消</el-button>
          <el-popconfirm title="你确认要修改吗?" @confirm="updateEvent">
            <template #reference>
              <el-button type="primary">
                确认
              </el-button>
            </template>
          </el-popconfirm>

        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="dialogFormVisible" title="添加事件" width="300">
      <el-form :model="form">
        <el-form-item label="事件名">
          <el-input v-model="form.eventName" autocomplete="off" />

        </el-form-item>
        <el-form-item label="事件类型">
          <el-select v-model="form.eventType" filterable placeholder="Select" style="width: 240px">
            <el-option v-for="type in eType" :key="type" :label="type" :value="type" />
          </el-select>
        </el-form-item>
        <el-form-item label="事件等级">
          <el-select v-model="form.eventLevel" placeholder="选择等级">
            <el-option label="一级" value="1" />
            <el-option label="二级" value="2" />
            <el-option label="三级" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.eventRemarks" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="createEvent">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>

</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { ref, inject } from "vue";
import { ElMessageBox, ElLoading, ElMessage } from 'element-plus'
//删除事件
const deleteEvent = (ID) => {
  axios
    .post("/Worker/delEventInfo ", {
      eventID: ID
    })
    .then(response => {
      console.log(response.data)

      if (response.data == 1) {
        ElMessage({
          message: "删除成功",
          type: "success"
        });

      }
      init();
    })
    .catch(error => {
      console.log(error);
    });
}
//初始化修改表
const update = (ID) => {
  dialogFormVisible1.value = true;
  axios
    .post("/Worker/getEventInfoByID ", {
      eventID: ID
    })
    .then(response => {
      updateeventinfo.value = response.data;
    })
    .catch(error => {
      console.log(error);
    });

}
//修改事件
const updateEvent = () => {
  dialogFormVisible1.value = false;
  axios
    .post("/Worker/renewEventInfo ", {
      eventID: updateeventinfo.value.eventID,
      eventName: updateeventinfo.value.eventName,
      eventLevel: updateeventinfo.value.eventLevel,
      remarks: updateeventinfo.value.remarks,
      eventType: updateeventinfo.value.eventType
    })
    .then(response => {
      updateeventinfo.value = response.data;


      init();
    })
    .catch(error => {
      console.log(error);
    });
  console.log(updateeventinfo.value)
}
let dialogFormVisible = ref(false)
let dialogFormVisible1 = ref(false)
const formLabelWidth = '140px'
let type = ref();
let select = ref('');
let input = ref('');
let updateeventinfo = ref({

})

let typevalue = ref('')
const form = ref({
  eventName: "",
  eventType: "",
  eventLevel: "",
  eventRemarks: ""
})


//创建事件
const createEvent = () => {
  dialogFormVisible.value = false;
  axios
    .post("/Worker/newEventInfo", {
      eventName: form.value.eventName,
      eventType: form.value.eventType,
      eventLevel: form.value.eventLevel,
      remarks: form.value.eventRemarks
    })
    .then((response) => {

      if (response.data == 1) {
        ElMessage({
          message: "添加成功",
          type: "success"
        });
        init();
      }
    }

    )
    .catch(error => {
      console.log(error);
    });
}


//搜索功能
const Searchby = () => {
  if (select.value == "事件名") {
    axios
      .post("/Worker/listEventInfoByName ", {
        eventName: input.value
      })
      .then(response => {
        eventArr.value = response.data;

      })
      .catch(error => {
        console.log(error);
      });
  }
  else if (select.value == "事件等级") {
    axios
      .post("/Worker/listEventInfoByRank ", {
        eventLevel: input.value
      })
      .then(response => {
        eventArr.value = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
  else if (select.value == "事件类型") {
    axios
      .post("/Worker/listEventInfoByType ", {
        eventType: input.value
      })
      .then(response => {
        eventArr.value = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }





}
import {
  Edit,
  Warning,
  Link,
  Fold,
  ArrowLeft,
  Refresh,
  Service,
  Close,
  Iphone,
  ChatDotSquare,
  Calendar,
  Bell,
  Coordinate,
  Search, DeleteFilled
} from "@element-plus/icons-vue";
const route = useRoute();
const router = useRouter();
const axios = inject("axios");
const eType = ref([])

const refresh = () => {
  init()
};
const user = sessionStorage.getItem("user");
let userobj = JSON.parse(user);
let userdata = userobj._value;
let eventArr = ref([]);
let event = ref({
  eventID: "",
  eventName: "",
  eventType: "",
  eventLevel: "",
  eventRemarks: ""
});


const back = () => {
  router.go(-1);
};
const self = () => {
  router.push("/workerMainPage/workerSelfPage");
};
const init = () => {
  axios
    .post("/Worker/listAllEventInfo", {})
    .then((response) => {
      eventArr.value = response.data;
    })
    .catch(error => {
      console.log(error);
    });
  axios.post("/Worker/listAllEventType",).then(response => {
    eType.value = response.data;
  }).catch(error => {
    console.log(error);
  })
  select.value = "";
  input.value = ""
};
init();
</script>

<style scoped>
.head {
  display: flex;
  justify-content: space-between;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.row {
  display: flex;
  justify-content: space-between;
}

.all {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  /* 100%窗口高度 */
  height: 100vh;
  /* 弹性布局 居中 */
  align-items: center;
  /* 渐变背景 */
  background: linear-gradient(200deg, #c5ebe3, #a9c1ed);
  /* 溢出隐藏 */
  overflow: hidden;
}

.scrollbar-demo-item {
  height: 130px;
  margin: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.del {
  display: flex;
  justify-content: space-between;
  margin-left: 340px;
  margin-rignt: 2px;
  margin-bottom: 2px;
}

.main {
  margin: 20px;
}
</style>